.trialLink {
	color: var(--text-primary-inverted) !important;
	text-decoration: underline;
}

.trialWrapper {
	align-items: center;
	background-color: #744ed4;
	color: var(--text-primary-inverted);
	display: flex;
	height: var(--banner-height);
	justify-content: center;
	width: 100%;
	z-index: 1000;

	&.productHunt {
		background-color: var(--color-green-600);
	}

	&.youtube {
		background-color: var(--color-red-600);
	}

	&.error {
		background-color: var(--color-red-400);

		& button {
			background: transparent;
		}
	}

	& button {
		--button-size: var(--size-medium);
		--icon-size: var(--size-xSmall);
		align-items: center;
		background: transparent;
		border: 0;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		height: var(--button-size);
		justify-content: center;
		margin-right: var(--size-small);
		position: absolute;
		right: 0;
		transform: scale(1.5);
		transform-origin: center;
		transition: all 0.2s ease-in-out;
		width: var(--button-size);

		& svg {
			flex-shrink: 0;
			height: var(--icon-size);
			transform-origin: center;
			transition: all 0.2s ease-in-out;
			width: var(--icon-size);
		}

		&:hover {
			transform: scale(2);
		}
	}
}

.trialTimeText {
	font-size: 12px;
	padding-bottom: 4px;
	padding-top: 4px;
	z-index: 100;

	& a {
		color: white;
		text-decoration: underline;
	}
}

.homeLink {
	align-items: center;
	color: var(--text-primary) !important;
	cursor: pointer;
	display: flex;
	justify-content: center;
	text-decoration: none;
}

.homeLink:hover {
	color: inherit;
	text-decoration: none;
}

.demoLink {
	color: var(--color-text-primary-inverted) !important;
	text-decoration: underline;
}

.demoLink:hover {
	color: var(--color-gray-400) !important;
}

.button {
	&:first-of-type {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	&:not(:first-of-type) {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-left: 1px solid #dcdbdd;
	}
}
